<template>
  <el-drawer v-model="drawerFlag" direction="rtl">
    <template #header>Edit Template</template>
    <template #default>
      <el-form :model="formModel" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="Name">
          <el-input v-model="formModel.name"></el-input>
        </el-form-item>
        <el-form-item label="CSS File Path">
          <el-input v-model="formModel.css_file_path"></el-input>
        </el-form-item>
        <el-form-item label="JS File Path">
          <el-input v-model="formModel.js_file_path"></el-input>
        </el-form-item>
        <el-form-item label="Description">
          <el-input type="textarea" v-model="formModel.description"></el-input>
        </el-form-item>
        <el-form-item label="CSS Content">
          <div v-if="drawerFlag" ref="cssEditor" style="width: 100%; height: 200px; border: 1px solid #ddd"></div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClickBtnCancel">取消</el-button>
        <el-button type="primary" @click="handleClickBtnSubmit">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, nextTick } from 'vue'
import Dal from '@/dal'
import { ElMessage } from 'element-plus'
import type { ElForm } from 'element-plus'
import * as monaco from 'monaco-editor'

const emits = defineEmits(['close', 'submit'])

const drawerFlag = ref(false)
const isEditMode = ref(false)

const cssEditor = ref<HTMLElement | null>(null)
const formRef = ref<InstanceType<typeof ElForm>>()

const formModel = ref({
  name: '',
  description: '',
  css_file_path: '',
  js_file_path: '',
  template_id: null as number | null, // 添加 template_id 属性
  css_content: '', // 新增字段
  js_content: '', // 新增字段
})
const rules = reactive({
  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  description: [{ required: true, message: '请输入模板描述', trigger: 'blur' }],
  css_file_path: [{ required: true, message: '请输入 CSS 文件路径', trigger: 'blur' }],
  js_file_path: [{ required: true, message: '请输入 JS 文件路径', trigger: 'blur' }],
})

const handleClickBtnCancel = () => {
  formRef.value?.resetFields()
  drawerFlag.value = false
}

const handleClickBtnSubmit = async () => {
  await formRef.value?.validate(async (valid) => {
    if (valid) {
      if (isEditMode.value && formModel.value.template_id !== null) {
        await Dal.FlexiPage.Templates.update(formModel.value.template_id, formModel.value)
      } else {
        await Dal.FlexiPage.Templates.create(formModel.value)
      }
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      emits('submit', { ...formModel })
    } else {
      console.log('表单验证失败')
    }
  })

  drawerFlag.value = false
}

let cssEditorInstance: monaco.editor.IStandaloneCodeEditor | null = null

onMounted(() => {})
const open = async (templateId: number | null) => {
  drawerFlag.value = true

  nextTick(() => {
    console.log('cssEditor.value', cssEditor.value)
    if (cssEditor.value) {
      cssEditorInstance = monaco.editor.create(cssEditor.value, {
        value: `div{color: red;}`,
        language: 'css',
        theme: 'vs-dark',
      })
      console.log('cssEditorInstance', cssEditorInstance)
      // // 监听编辑器内容变化
      // cssEditorInstance.onDidChangeModelContent(() => {
      //   formModel.value.css_content = cssEditorInstance?.getValue() || ''
      // })
    }
  })
  if (templateId && templateId !== null) {
    isEditMode.value = true
    const template = await Dal.FlexiPage.Templates.findById(templateId)
    formModel.value = { ...template, template_id: templateId } // 确保 template_id 被正确赋值
    // if (cssEditorInstance && jsEditorInstance) {
    //   cssEditorInstance.setValue(template.css_content || '')
    // }
  } else {
    formModel.value = {
      name: '',
      description: '',
      css_file_path: '',
      js_file_path: '',
      template_id: null, // 初始化为 null
      css_content: '', // 新增字段
      js_content: '', // 新增字段
    }
    // if (cssEditorInstance) {
    //   cssEditorInstance.setValue('')
    // }
  }
}

defineExpose({
  open,
})
</script>
